<template>
  <view class="data-card" @click="onClick">
    <!-- 左侧图标 -->
    <view class="data-icon">
      <image src="/static/images/wd.png" mode="widthFix"></image>
    </view>

    <!-- 中间信息 -->
    <view class="data-info">
      <view class="data-title">{{ data.userName }}</view>
      <view class="flex_left_right" style="margin-bottom: 8rpx">
        <view class="flex_right">网点数量：{{ data.wdSum }}</view>
        <view class="flex_right">设备数量：{{ data.sbSum }}</view>
      </view>
      <view class="flex_left_right" style="margin-bottom: 8rpx">
        <view class="flex_right">订单数量：{{ data.ddSum }}</view>
        <view class="flex_right">今日订单：{{ data.jrDdSum }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useNavigatePage } from '@/hooks/navigateTo'
  import { PropType, defineProps } from 'vue'
  const navigatePage = useNavigatePage()
  const props = defineProps({
    data: {
      type: Object as PropType<any>,
      required: true,
    },
  })

  const onClick = () => {
    navigatePage.navigateTo(`/pages/zmanager/outlets/index?userId=${props.data.userId}&userName=${props.data.userName}`)
  }
</script>
<style lang="css" scoped>
  /* 数据卡片样式 - 配色调整 */
  .data-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfdff; /* 浅灰蓝背景，替代纯白 */
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2px 8px rgba(55, 125, 255, 0.05); /* 淡蓝色阴影 */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f0f5ff; /* 淡蓝边框 */
  }

  .data-card:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 4px 12px rgba(55, 125, 255, 0.1); /* 加深蓝色阴影 */
    border-color: #e6f0ff;
  }

  .data-icon {
    width: 140rpx;
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7ff; /* 图标区浅蓝背景 */
    border-radius: 8rpx;
    overflow: hidden;
  }

  .data-icon image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .data-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    margin-left: 20rpx;
  }

  .data-title {
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 8rpx;
  }

  .data-address {
    font-size: 26rpx;
    line-height: 36rpx;
  }

  /* 导航按钮配色调整 */
  .nav-btn {
    color: #3b7fff;
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 6rpx;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    gap: 6rpx;
    transition: all 0.2s ease;
    height: 44rpx;
  }

  .nav-icon {
    vertical-align: middle;
  }
</style>
